<template>
  <el-drawer
    :title="translate('yjConfig')"
    :visible.sync="showDeposit"
    size="700px"
    :wrapper-closable="!modalDialog"
  >
    <div class="doumee_table_header">
      <el-button
        v-if="meta.indexOf('AddBraceletDeposit') > -1"
        type="primary"
        @click="addBtn"
      >{{ translate("add") }}</el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-table"
    >
      <el-table-column
        align="center"
        :label="translate('yj')"
        prop="price"
        min-width="100"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="translate('sort')"
        prop="sortNum"
        min-width="100"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        prop="updateTime"
        :label="translate('edittimeLast')"
        min-width="180"
      >
        <template slot-scope="scope">
          <span>{{
            scope.row.updateTime ? scope.row.updateTime : scope.row.createTime
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="translate('status')"
        min-width="80"
      >
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            v-preventReClick
            :active-value="'1'"
            :inactive-value="'0'"
            :disabled="meta.indexOf('EditBraceletDeposit') == -1"
            @change="upDateStatus(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="translate('handle')"
        min-width="120"
      >
        <template slot-scope="scope">
          <div class="flex-cc">
            <el-button
              v-if="meta.indexOf('EditBraceletDeposit') > -1"
              v-preventReClick
              type="text"
              @click="editBtn(scope.row)"
            >{{ translate("edit") }}</el-button>
            <el-button
              v-if="meta.indexOf('DeletedBraceletDeposit') > -1"
              v-preventReClick
              type="text"
              class="secondColor"
              @click="activityRemove(scope.row.id)"
            >{{ translate("del") }}</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <Paginations
      :total="total"
      :page="pagination.page"
      @SizeChange="pageSizeChange"
      @current-change="getList"
    />
  </el-drawer>
</template>

<script>
import { getBraceletDepositList, editBraceletDeposit, deletedBraceletDeposit } from '@/api'
import store from '@/store'
import { parseTime } from '@/utils'
export default {
  data() {
    return {
      modalDialog: store.getters.dialog,
      showDeposit: false, // 弹窗
      list: [],
      meta: [],
      total: 0,
      pagination: {
        page: 1,
        rows: 10
      },
      listLoading: true
    }
  },
  created() {
    this.meta = this.$route.meta.buttons || []
  },
  methods: {
    activityRemove(id) {
      const that = this
      this.$confirm(this.translate('configDelP'), this.translate('ts'), {
        confirmButtonText: this.translate('qd'),
        cancelButtonText: this.translate('cancel'),
        type: 'warning'
      })
        .then(() => {
          deletedBraceletDeposit({ param: { id }}).then((res) => {
            if (res.errorCode === '000000') {
              that.$message.success(this.translate('delScs'))
              that.getList(1)
            }
          })
        })
        .catch(() => { })
    },
    upDateStatus(row) {
      // 更新状态
      const arr = [...this.list]
      const obj = { ...row }
      this.listLoading = true
      editBraceletDeposit({
        param: {
          id: obj.id,
          price: obj.price,
          sortNum: obj.sortNum,
          status: obj.status
        }
      })
        .then((res) => {
          this.listLoading = false
          if (res.errorCode === '000000') {
            if (obj.status === '1') {
              this.$message.success(this.translate('qyScs'))
            } else {
              this.$message.success(this.translate('jyScs'))
            }
            this.getList(1)
          } else {
            arr.forEach((e) => {
              if (e.id === obj.id) {
                e.status = row.status === '1' ? '0' : '1'
              }
            })
            this.list = arr
          }
        })
        .catch(() => {
          this.listLoading = false
          arr.forEach((e) => {
            if (e.id === obj.id) {
              e.status = row.status === '1' ? '0' : '1'
            }
          })
          this.list = arr
        })
    },
    pageSizeChange(val) {
      this.pagination.rows = val
      this.getList(1)
    },
    addBtn() {
      this.showDeposit = false
      this.$emit('add')
    },
    editBtn(row) {
      this.showDeposit = false
      this.$emit('edit', row)
    },
    getList(page) {
      const { pagination } = this
      if (page) {
        pagination.page = page
        this.pagination.page = Number(page)
      }
      pagination.firstQueryTime = parseTime(new Date())
      this.showDeposit = true
      this.listLoading = true
      getBraceletDepositList({
        pagination, param: {
          venueId: sessionStorage.getItem('venueId')
        }
      }).then(res => {
        this.listLoading = false
        if (res.errorCode === '000000') {
          this.list = res.recordList
          this.total = res.totalCount
        }
      }).catch(() => {
        this.listLoading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
